import { useState, useEffect } from 'react';
import {Modal, Table} from "antd";
import BpmView from "@/biz-components/bpm-view";
import { apiUrl } from './service';
import {xhrGet, xhrPostJson} from "@/services";
import {formatMessage} from "umi";

interface ProcessMProps {
  prcsInstId: string;
  code: string;
  cancel: () => void;
}

export default (props: ProcessMProps) => {
  const { prcsInstId, cancel, code } = props;
  const [flow, setFlow] = useState<any>(null);
  const [records, setRecords] = useState<any[]>([]);
  const [loading, setLoading] = useState<boolean>(false);
  useEffect(() => {
    if (!prcsInstId) return;
    setLoading(true);
    // 初始化数据
    Promise.all([
      xhrPostJson(apiUrl.comment, { pageNo: 1, pageSize: 1000, queryKeys: { prcsInstId, code } }),
      xhrGet(apiUrl.findPrcsByPrcsInstId, { prcsInstId: prcsInstId, code }),
      // xhrPostJson(api.bpmDetailState, { processInstanceId }),
    ]).then((resArr: any) => {
      setLoading(false);
      const { content } = resArr[0]?.result;
      const { prcsModelXml } = resArr[1]?.result;
      setRecords(content);
      const flow = {
        prcsModelXml,
      };
      setFlow(flow);
    });
  }, [prcsInstId]);
  const flowError = (err: any) => {
    console.log(`${err}获取流程树`);
  };
  return <Modal
    confirmLoading={loading}
    onCancel={cancel}
    onOk={cancel}
    width={900}
    visible
    title={formatMessage({
      id: 'processDetail.recordTable.approve.title'
    })}
  >
    {flow ? (
      <BpmView value={flow.prcsModelXml} onError={flowError} />
    ) : null}
    <Table
      rowKey="id"
      style={{ padding: 0 }}
      dataSource={records || []}
      pagination={false}
      size="small"
      bordered
      columns={[
        {
          title: formatMessage({ id: 'common.index' }),
          dataIndex: 'order',
          render(text: any, record: any, index: any) {
            return ++index;
          },
        },
        {
          title: formatMessage({ id: 'processDetail.recordTable.taskName.label' }),
          dataIndex: 'taskName',
        },
        {
          title: formatMessage({ id: 'processDetail.recordTable.approver.label' }),
          dataIndex: 'operationUserName',
        },
        { title: formatMessage({ id: 'operate' }), dataIndex: 'operationTypeName' },
        {
          title: formatMessage({ id: 'processDetail.recordTable.comment.label' }),
          dataIndex: 'comments',
              render(text: any, record: any, index: any) {
              const newString: string[] = text?.split(/<br\s*>/);
              return <div style={{ wordBreak: 'break-all', whiteSpace: 'pre-line' }}>{newString?.join('\n')}</div>
          }
        },
        {
          title: formatMessage({ id: 'processDetail.recordTable.taskStartDate.label' }),
          dataIndex: 'operationTime',
          // render: timeFormatter,
        },
      ]}
    />
  </Modal>
}
